<template>
  <div>
    <el-table v-loading="loading" :data="taskList">
      <el-table-column label="编号" prop="instanceId" width="60" align="center"/>
      <el-table-column label="流程名称" prop="flowName" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span @click="handlePreview(scope.row)" style="cursor: pointer;">{{ scope.row.flowName }}</span>
        </template>
      </el-table-column>
       <el-table-column label="业务类型" prop="businessTypeOpt" align="center" width="100" :formatter="businessTypeOptFormat"/>
      <el-table-column label="发起人员" prop="createBy" align="center" width="80"/>
      <el-table-column label="发起时间" prop="startTime" width="140" align="center"/>
      <el-table-column label="签批步骤" prop="nodeName" width="140" align="center" :show-overflow-tooltip="true"/>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <PurchasePreview ref="procurementChemicals" @refresh="getList" edit></PurchasePreview>
    <ReceiptPreview ref="materialRepairApplication" @refresh="getList"></ReceiptPreview>
    <ProjectDetails ref="projectCreationApplication" @refresh="getList"></ProjectDetails>
    <OccupationPreview ref="applicationChemicals" @refresh="getList"></OccupationPreview>
    <SafetyPreview ref='safetyCheck' @refresh="getList"></SafetyPreview>
    <CourseAdjustView ref="courseAdjust" @refresh="getList"></CourseAdjustView>
    <ReservationDetail ref="labReservationApplication" @refresh="getList"></ReservationDetail>
    <SafetyTaskView ref="safetyCheckTask" @refresh="getList"></SafetyTaskView>
    <EvalutionDetail ref="labEvalution" @refresh="getList"></EvalutionDetail>
  </div>
</template>
<script>
  import {
    todoList,
    doneList
  } from "@/api/labdata/flowTask";
  import {
    copyToList,
    finsiedList,
    myList
  }
  from "@/api/labdata/flowInstance";
  import PurchasePreview from "@/views/labdanger/dangerComps/purchasePreview.vue";
  import ReceiptPreview from "@/views/labbase/receipt_form/receipt_preview.vue"
  import ProjectDetails from "@/views/labbase/project_creation/projectDetail.vue";
  import OccupationPreview from "@/views/labdanger/dangerComps/occupationPreview.vue";
  import SafetyPreview from "@/views/labsafety/labsafetyForm/view/viewDialog.vue";
  import CourseAdjustView from "@/views/course/adjust/viewDialog.vue"
  import ReservationDetail from "@/views/labdata/reservation/reservationDetail.vue";
  import SafetyTaskView from "@/views/labsafety/labsafetyTask/view/viewDialog.vue";
  import EvalutionDetail from "@/views/evalution/labEvalution/details.vue";
  export default {
    name: "ToDoHome",
    components: {
      PurchasePreview,
      ReceiptPreview,
      ProjectDetails,
      OccupationPreview,
      SafetyPreview,CourseAdjustView,ReservationDetail,SafetyTaskView,EvalutionDetail
    },
    data() {
      return {
        // 流程任务表格数据
        taskList: [],
        //流程类型字典
        businessTypeOptions:[],
        // 总条数
        total: 0,
        // 任务状态字典
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {}
      };
    },
    props: {
      taskType: String,
    },
    watch: {
      taskType: function(val) {
        this.getList();
      }
    },
    created() {
      this.getList();
      this.getDicts("businessTypeOpt").then(response => {
        this.businessTypeOptions = response.data;
      });
    },
    methods: {
      handlePreview(item) {
        this.$refs[item.businessTypeOpt].handleUpdate(item);
      },
      // 任务状态字典翻译
      businessTypeOptFormat(row, column) {
        return this.selectDictLabel(this.businessTypeOptions, row.businessTypeOpt);
      },
      /** 查询流程任务列表 */
      getList() {
        this.loading = true;
        if (this.taskType == '1') {
          todoList(this.queryParams).then(response => {
            this.taskList = response.rows;
            this.total = response.total;
            this.loading = false;
          });
        } else if (this.taskType == '2') {
          doneList(this.queryParams).then(response => {
            this.taskList = response.rows;
            this.total = response.total;
            this.loading = false;
          });
        } else if (this.taskType == '3') {
          finsiedList(this.queryParams).then(response => {
            this.taskList = response.rows;
            this.total = response.total;
            this.loading = false;
          });
        } else if (this.taskType == '4') {
          copyToList(this.queryParams).then(response => {
            this.taskList = response.rows;
            this.total = response.total;
            this.loading = false;
          });
        } else if (this.taskType == '5') {
          myList(this.queryParams).then(response => {
            this.taskList = response.rows;
            this.total = response.total;
            this.loading = false;
          });
        }
      },
    }
  };
</script>
<style type="text/css" scoped>
  .list_view {
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
    /*height: 15rem;/*
    /*overflow-y: scroll;*/
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;

    div {
      display: flex;
      flex-direction: row;
    }

    span {
      font-size: 1.125rem;
      color: #666;
      margin-bottom: 1rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
</style>
